<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('button:first').click(function () {
                //$.get('test.txt', function (responseText, status) {
                //   var currentContent = '数据：' + responseText + '<br>状态:' + status;
                //   $('div.show_css').html(currentContent);
                // })

                var data = "{ root: [ { name: '1', value: '0' }, { name: '6101', value: '北京市' }, { name: '6102', value: '天津市' }, { name: '6103', value: '上海市' }, { name: '6104', value: '重庆市'}]}";
                var test = eval('(' + data + ')');
                $('div.show_css').html(test.root[0].value);
            });
            $('button:eq(1)').click(function () {
                $.ajax({
                    url: 'http://www.godsuper.com/TestService/getAllUser',
                    type: 'post', //GET
                    async: true,    //或false,是否异步
                    //contentType:'application/json;charset=UTF-8',
                    data:
                    JSON.stringify({ "KEY": "eba28190-0bd2-434b-82aa-0d57df73f8e6" })
                    ,
                    //timeout: 5000,    //超时时间
                    //dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                    beforeSend: function (xhr) {
                        console.log(xhr)
                        console.log('发送前')
                    },
                    success: function (data, textStatus, jqXHR) {
                        console.log(jqXHR)
                        console.log(data)
                        console.log(textStatus)
                        var sss = new Array();
                        //$('div.show_css').html(data);
                        var test = eval('(' + data + ')');
                        $('div.show_css:first').html(data);
                        //$('div.show_css:eq(1)').html(test.CurrentUsers.count);
                        $.each(test.CurrentUsers,function(index,item){
                            var newRow="<tr><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.msg+"</td><td><a href='#'>修改</td></tr>";
                            $('table').append(newRow);

                        });
                       // $('div.show_css:eq(1)').html(test.CurrentUsers[0].name);
                    },
                    error: function (xhr, textStatus) {
                        console.log('错误')
                        console.log(xhr)
                        console.log(textStatus)
                    },
                    complete: function () {
                        console.log('结束')
                    }
                })

            });
        })
    </script>
    <style>
        .show_css {
            width: 400px;
            height: 200px;
            background-color: peachpuff;
            color: gray;
            border: 2px solid lightslategray;
        }
    </style>
</head>
<div>
    <div class="show_css">加载内容</div>
    <div class="show_css">加载内容2</div>
    <button>AJAX-GET</button>
    <button>AJAX-POST</button>
    <table>
        <thead>
            <td>ID</td>
            <td>名称</td>
            <td>详情</td>
            <td>操作</td>
        </thead>
    </table>
</div>

</html>